<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>钱包详情</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" href="../css/aui-flex.css">
    <style>
    </style>
</head>
<body style="background: #fff;">
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="font-black aui-iconfont aui-icon-left"></span>
    </a>
    <span class="aui-pull-right color-blue">PH钱包明细</span>
</header>
<section class="aui-padded-15 over-flow">
    <h2 class="font-weight-700 aui-margin-b-10 aui-margin-t-10">钱包类型</h2>
    <div class="bottomImg radius-6 over-flow box boxShadow" style="width: 100%;"   >
        <div class=" colorWhite aui-padded-15" style="background: #657ce2 ;">
            <div class="display-flex aui-padded-b-10" style="border-bottom: 3px solid #fff;">
            <div class="aui-text-center ">
                <div class="radius-6 over-flow aui-padded-10 bg-white"><img src="../image/eth.jpg" width="50" alt=""></div>
                <div class=" aui-padded-t-10 font-size-20">ETH</div>
            </div>
            <div class="flex-1  aui-padded-l-15 aui-padded-t-15">
<div class="display-flex" style="font-size: 1.5rem;"><span>51.3642</span><span class="font-size-18 aui-inline aui-padded-t-5 aui-padded-l-5">ETH</span></div>
<div class="font-size-18 aui-padded-t-20">≈ $ 29147.36</div>
            </div>
            <div class="font-size-20 font-weight-700 display-flex flex-end">
                50%锁定
            </div>
        </div>
        </div>
    </div>
    <div class="bottomImg aui-margin-t-15 radius-6 over-flow box boxShadow" style="width: 100%;"   >
        <div class=" colorWhite aui-padded-15" style="background: #f765c7 ;">
            <div class="display-flex " >
            <div class="aui-text-center ">
                <div class="radius-6 over-flow aui-padded-10 bg-white"><img src="../image/eth.jpg" width="50" alt=""></div>
                <div class=" aui-padded-t-10 font-size-20">ETH</div>
            </div>
            <div class="flex-1  aui-padded-l-15 aui-padded-t-15">
<div class="display-flex" style="font-size: 1.5rem;"><span>51.3642</span><span class="font-size-18 aui-inline aui-padded-t-5 aui-padded-l-5">ETH</span></div>
<div class="font-size-18 aui-padded-t-20">≈ $ 29147.36</div>
            </div>
            <div class="font-size-20 font-weight-700 display-flex flex-end">
                提币
            </div>
        </div>
        </div>
    </div>
    <div class="bottomImg aui-margin-t-15 radius-6 over-flow box boxShadow" style="width: 100%;"   >
        <div class=" colorWhite aui-padded-15" style="background: #f6e24f ;">
            <div class="display-flex " >
            <div class="aui-text-center ">
                <div class="radius-6 over-flow aui-padded-10 bg-white"><img src="../image/eth.jpg" width="50" alt=""></div>
                <div class=" aui-padded-t-10 font-size-20">ETH</div>
            </div>
            <div class="flex-1  aui-padded-l-15 aui-padded-t-15">
<div class="display-flex" style="font-size: 1.5rem;"><span>51.3642</span><span class="font-size-18 aui-inline aui-padded-t-5 aui-padded-l-5">ETH</span></div>
<div class="font-size-18 aui-padded-t-20">≈ $ 29147.36</div>
            </div>
            <div class="font-size-20 font-weight-700 display-flex flex-end">
                提币
            </div>
        </div>
        </div>
    </div>
</section>
<section class="aui-padded-15 over-flow">
    <h2 class="font-weight-700 aui-margin-b-10 aui-margin-t-10">Transactions</h2>
    <ul class="aui-padded-r-10  aui-padded-l-10 bg-white">
        <li class="aui-border-b aui-padded-b-10 aui-padded-t-10" >
            <div style="" class="display-flex flex-center">
                <div class="aui-padded-r-10"><img src="../image/right.jpg" width="20" alt=""></div>
                <div class="flex-1 aui-padded-r-5" style="">
                    <div class="font-size-16 font-weight-600">Receivved</div>
                    <div class="color-hui">January 30,2018</div>
                </div>
                <div class="display-flex color-or"><span class="font-size-25">+1.2462</span><span class="aui-inline aui-padded-5">ETH</span></div>
            </div>
        </li>
        <li class="aui-border-b aui-padded-b-10 aui-padded-t-10">
            <div style="" class="display-flex flex-center">
                <div class="aui-padded-r-10"><img src="../image/left.jpg" width="20" alt=""></div>
                <div class="flex-1 aui-padded-r-5" style="">
                    <div class="font-size-16 font-weight-600">Send</div>
                    <div class="color-hui">January 30,2018</div>
                </div>
                <div class="display-flex color-jian"><span class="font-size-25">-1.2462</span><span class="aui-inline aui-padded-5">ETH</span></div>
            </div>
        </li>
        <li class="aui-border-b aui-padded-b-10 aui-padded-t-10">
            <div style="" class="display-flex flex-center">
                <div class="aui-padded-r-10"><img src="../image/money.jpg" width="20" alt=""></div>
                <div class="flex-1 aui-padded-r-5" style="">
                    <div class="font-size-16 font-weight-600">Contract Fee</div>
                    <div class="color-hui">January 30,2018</div>
                </div>
                <div class="display-flex color-jian"><span class="font-size-25">-1.2462</span><span class="aui-inline aui-padded-5">ETH</span></div>
            </div>
        </li>
    </ul>
</section>
</body>
<script src="../script/jquery.min.js"></script>
<script>
    $(".topImg").click(function () {
        $(".topImg").removeClass('btnAfter');
        $(this).addClass('btnAfter');
        if($(".bottomImg").hasClass('btnAfter')){
            $(".btnBefore").addClass('btnAfter');
        }
    })
    $(".bottomImg").click(function () {
        $(".bottomImg").removeClass('btnAfter');
        $(this).addClass('btnAfter')
        if($(".topImg").hasClass('btnAfter')){
            $(".btnBefore").addClass('btnAfter');
        }
    })
</script>
</html>